﻿@model thailandProject.ViewModel.EmailTemplateModel

@{
    ViewBag.Title = "Edit Email Template";
}

<div id="Wrapper2">
    <div id="content_header">
        <div id="headerimage">
        </div>
        <div id="theheader">@ViewBag.Header</div> 
    </div>
    <!-- Left Column begins here -->
    <aside id="sidebar-wrapper">
        <nav class="sidebar">
            <h1>Edit Email Template</h1>
            <!-- CONTENT GOES HERE -->
            @Html.ActionLink("Back to Email Preferences", "EmailPreferences")<br /><br />
            @using (Html.BeginForm("EditEmailTemplate", "Admin", FormMethod.Post, new { id = "templateForm" }))
            {
                string tags = "";
                foreach (KeyValuePair<string, thailandProject.ViewModel.DescPair> kvp in Model.tagCloud)
                {
                    tags += "{" + kvp.Key + "}" + "{" + kvp.Value.defaultValue + "}";
                }
                <fieldset>
                    <legend>Template</legend>
                    <div class="w100 floatleft">
                        <div class="floatleft w100">Template: <br />
                            @foreach(KeyValuePair<string, thailandProject.ViewModel.DictData> kvp in Model.sentenceList)
                            {
                                string key = kvp.Key.Replace(" ", "_");
                                <input type="hidden" name="keys" value="@kvp.Key" />
                                <input type="hidden" id="@key" name="values" class="template_field" value="@kvp.Value.value" />
                            }
                            <div>
                                <div class="editor-label">
                                    <select id="selector">
                                        @foreach(KeyValuePair<string, thailandProject.ViewModel.DictData> kvp in Model.sentenceList)
                                        {
                                            string key = kvp.Key.Replace(" ", "_");
                                            <option value="@key">@kvp.Key</option>
                                        }
                                    </select>
                                </div>
                                <div class="editor-field">
                                    <textarea id="editorField">@Model.sentenceList.First().Value.value</textarea>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" id="templateType" name="templateType" value="@Model.templateType" />
                        <input type="hidden" id="tags" value="@tags" />
                    </div>
                </fieldset>
                <fieldset>
                    <legend>Tag Cloud</legend>
                    These tags represent variables that the system will insert values into when it's time to generate the email. Use any of these in the template
                    editor above. Please note that the preview uses default values. These values will not appear in the live version.<br /><br />
                    @foreach(KeyValuePair<string, thailandProject.ViewModel.DescPair> kvp in Model.tagCloud)
                    {
                        @kvp.Key@:: @kvp.Value.defaultValue - @kvp.Value.description
                        <br />
                    }
                </fieldset>
                <fieldset>
                    <legend>Preview</legend>
                    <div>
                        @if (Model.templateType == "onReservationDrop")
                        {
                            <div class="editor-label">
                                # of Reservations Dropped:
                            </div>
                            <div class="editor-field">
                                <select id="onReservationDroppedSelect">
                                    <option value="1">One</option>
                                    <option value="2">Two or More</option>
                                </select>
                            </div>
                        }
                        else if (Model.templateType == "onReservationEdit")
                        {
                            <div class="editor-label">
                                Type of reservation edit:
                            </div>
                            <div class="editor-field">
                                <span>
                                    <input type="checkbox" class="editCheckboxes" id="dates" /> Dates<br />
                                    <input type="checkbox" class="editCheckboxes" id="price" checked="checked" /> Price<br />
                                    <input type="checkbox" class="editCheckboxes" id="confirmed" /> Confirmed<br />
                                </span>
                            </div>
                        }
                        else if (Model.templateType == "onPropInquiry")
                        {
                            <div class="editor-label">
                                # of Complete Matches
                            </div>
                            <div class="editor-field">
                                <select id="onPropInquiryCompleteSelect" class="propSelect">
                                    <option value="0">Zero</option>
                                    <option value="1" selected="selected">One</option>
                                    <option value="2">Two or More</option>
                                </select>
                            </div>
                            <div class="editor-label">
                                # of Partial Matches
                            </div>
                            <div class="editor-field">
                                <select id="onPropInquiryPartialSelect" class="propSelect">
                                    <option value="0">Zero</option>
                                    <option value="1">One</option>
                                    <option value="2">Two or More</option>
                                </select>
                            </div>
                        }
                        
                    </div>
                    <div class="viewclientrow">
                        <div id="preview" style="color:black;">

                        </div>
                    </div>
                    
                </fieldset>
                <input type="image" src="../../images/save_button.png" value="Submit" />
            }
        </nav>
        
        <!-- Left column ends here -->
    </aside>
    <!-- Right column begins here -->
    <article id="contents">
        
    </article>
    <!-- Right column ends here -->
</div>
<!-- Div wrapper2 ends here -->

<script>
    $("document").ready(function () {
        $().ready(function ()
        {
            //Load the taglist
            window.bbtags = new Array();
            var tagList = $("#tags").val();
            var counter = 0;
            while (tagList.length > 0) {
                window.bbtags[counter] = tagList.substr(1, tagList.indexOf("}") - 1);
                tagList = tagList.substr(tagList.indexOf("}") + 1);

                counter++;
            }

            //Preload the preview field
            load_preview();
        })

        $("#onReservationDroppedSelect").change( function () {
            load_preview();
        })

        $(".editCheckboxes").change( function () {
            load_preview();
        })

        $(".propSelect").change(function () {
            load_preview();
        })

        $("#selector").change( function() {
            //Load the appropriate text into the editor
            $("#editorField").val($("#" + $(this).val()).val());
        })

        $("#editorField").keyup( function() {
            //Update the section's hidden field
            $("#" + $("#selector").val()).val($(this).val());

            load_preview();
        })

        $("#templateForm").submit( function () {
            //Get all of the values and append a delimiter onto
            //the end of it so the controller can process it
            var fields = $(".template_field");

            for (var i = 0; i < fields.length; i++)
                $(fields[i]).val($(fields[i]).val() + "}");

            return true;
        })

        function load_preview() {
            var type = $("#templateType").val();
            var fields = $(".template_field");
            var message = "";

            //Determine the type so it knows how to render it
            message = generateBody(fields, message, type);

            message = message.replace(/\n/g, "<br>");
            message = message.replace(/  /g, " &nbsp;");

            for (var i = 0; i < window.bbtags.length; i += 2) {
                message = message.replace(window.bbtags[i], window.bbtags[i+1]);
            }

            $("#preview").html(message);
        }

        function generateBody(fields, message, type) {
            message += $("#Introduction").val();

            if (type == "onReservationDrop") {
                //Get the selector's value
                if ($("#onReservationDroppedSelect").val() == "1") {
                    //Get the single cancelled body
                    message += $("#Single_Property_Cancelled").val();
                }
                else {
                    //Get the multiple cancelled properties
                    message += $("#Multiple_Properties_Cancelled").val();
                    message += $("#Property_Information_Model").val();
                    message += $("#Property_Information_Model").val();
                }

                //Add the outro
                message += $("#Summary").val();
                message += $("#Signature").val();
            }
            else if (type == "onReservationEdit") {
                //Append values together when the corresponding checkbox is pressed
                if ($("#dates").attr('checked') == 'checked')
                    message += $("#Reservation_Date_Changed").val();
                if($("#price").attr('checked') == 'checked')
                    message += $("#Reservation_Quoted_Price_Changed").val();
                if ($("#confirmed").attr('checked') == 'checked')
                    message += $("#Reservation_Confirmation_Changed_to_Confirmed").val();
                else
                    message += $("#Reservation_Confirmation_Changed_to_Unconfirmed").val();

                message += $("#Summary").val();
                message += $("#Signature").val();
            }
            else if (type == "onPropInquiry") {
                var comMatch = parseInt($("#onPropInquiryCompleteSelect").val());
                var parMatch = parseInt($("#onPropInquiryPartialSelect").val());

                if (comMatch == 0 && parMatch == 0) {
                    //There were no matches found
                    message += $("#No_Properties_Available").val();
                    message += $("#Summary_No_Matches_Found").val();
                }
                else {
                    if (comMatch > 0) {
                        //There was at least one complete match
                        if (comMatch == 2) {
                            //There were two or more complete matches
                            message += $("#Multiple_Complete_Matches_Available").val();
                            message += $("#Complete_Match_Property_Information_Model").val();
                            message += $("#Complete_Match_Property_Information_Model").val();
                        }
                        else {
                            message += $("#One_Complete_Match_Available").val();
                            message += $("#Complete_Match_Property_Information_Model").val();
                        }

                        if (parMatch > 0) {
                            //If a partial match or matches were offered
                            if (parMatch == 2) {
                                //There were two or more partial matches suggested
                                message += $("#Complete_and_Partial_Matches_Available").val();
                                message += $("#Complete-Partial_Property_Information_Model").val();
                                message += $("#Complete-Partial_Property_Information_Model").val();
                            }
                            else {
                                //There was only one partial match
                                message += $("#Complete_and_One_Partial_Match_Available").val();
                                message += $("#Complete-Partial_Property_Information_Model").val();
                            }
                        }
                    }//end to if comMatch >0
                    else {
                        //There was at least one partial match
                        if (parMatch == 2) {
                            //There was at least two partial matches available
                            message += $("#Multiple_Partial_Matches_Available").val();
                            message += $("#Partial_Match_Property_Information_Model").val();
                            message += $("#Partial_Match_Property_Information_Model").val();
                        }
                        else {
                            //There was only one partial match
                            message += $("#One_Partial_Match_Available").val();
                        }
                    }//End to else (parMatches)

                    message += $("#Summary_Matches_Found").val();
                }//end to else had matches

                message += $("#Signature").val();
            }//end to else if
            else {
                for (var i = 1; i < fields.length; i++) {
                    message += $(fields[i]).val();
                }
            }

            return message;
        }
    })
</script>